<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>房型管理 </el-breadcrumb-item>
      <el-breadcrumb-item>报修工单</el-breadcrumb-item>
      <el-breadcrumb-item>报修工单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="repair-content">

      <el-form :inline="true"
        class="demo-form-inline">
        <el-form-item>
          <el-input placeholder="报修对象/地址"
            v-model="repairPlace"
            clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="报修人/维修人"
            v-model="name"
            clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-dropdown @command="setType_state">
            <span class="el-dropdown-link">
              {{typeStr_state}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{title:'全部类型',id:''}">所有状态</el-dropdown-item>
              <el-dropdown-item :command="{title:'代金券',id:'1'}">待处理</el-dropdown-item>
              <el-dropdown-item :command="{title:'折扣券',id:'2'}">已接单</el-dropdown-item>
              <el-dropdown-item :command="{title:'代金券',id:'1'}">已拒绝</el-dropdown-item>
              <el-dropdown-item :command="{title:'折扣券',id:'2'}">待验收</el-dropdown-item>
              <el-dropdown-item :command="{title:'代金券',id:'1'}">重新验收</el-dropdown-item>
              <el-dropdown-item :command="{title:'折扣券',id:'2'}">已完成</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item>
          <el-dropdown @command="setType">
            <span class="el-dropdown-link">
              {{typeStr}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{title:'全部类型',id:''}">紧急程度</el-dropdown-item>
              <el-dropdown-item :command="{title:'代金券',id:'1'}">紧急</el-dropdown-item>
              <el-dropdown-item :command="{title:'折扣券',id:'2'}">普通</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item label="日期：">
          <el-date-picker align="right"
            type="date"
            placeholder="选择日期"
            @change="searchByDate"
            v-model="startTime"
            value-format="yyyy-MM-dd"
            :clearable="false"
            :editable="false">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="下单时间"
            v-model="time"
            clearable></el-input>
        </el-form-item>
        <!-- 查询 -->
        <el-form-item>
          <el-button type="primary"
            @click.native="_reset"
            size="small"
            style="width:60px">
            <i class="el-icon-search"></i>
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
            size="small"
            style="width:60px"
            @click="_add">
            新增
          </el-button>
        </el-form-item>
      </el-form>
      <!-- 新增修改查看弹窗 -->
      <el-dialog :title="title"
        :visible.sync="dialogVisible"
        v-if="dialogVisible"
        width="30%">
        <el-form label-width="80px"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm">
          <el-form-item label="报修地点"
            required
            prop="place">
            <el-input placeholder="请输入报修地点"
              v-filterSpecialChar
              v-model="ruleForm.place"
              maxlength="20"
              clearable
              :disabled="isView"></el-input>
          </el-form-item>
          <el-form-item label="报修对象"
            required
            prop="target">
            <el-input placeholder="请输入报修对象"
              v-filterSpecialChar
              v-model="ruleForm.target"
              maxlength="20"
              clearable
              :disabled="isView"></el-input>
          </el-form-item>
          <el-form-item label="备注信息"
            v-filterSpecialChar
            required
            prop="content">
            <el-input type="textarea"
              v-model="ruleForm.content"
              maxlength="50"
              dialogVisible
              clearable
              :disabled="isView"></el-input>
          </el-form-item>
          <el-form-item label="紧急程度"
            prop="resource">
            <el-radio-group v-model="ruleForm.resource">
              <el-radio label="普通"></el-radio>
              <el-radio label="紧急"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="图片说明"
            v-filterSpecialChar>
            <el-upload action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :file-list="imgUrl"
              :on-remove="handleRemove"
              :disabled="disabled_file"
              :http-request="sendChange">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="报修人"
            required
            prop="place">
            <el-input placeholder="请选择报修人"
              v-filterSpecialChar
              v-model="ruleForm.applicant"
              maxlength="20"
              clearable
              :disabled="isView"></el-input>
            <el-button class="applicant_btn"
              type="primary"
              @click="innerVisible = true">选择</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
              @click="submitForm('ruleForm')">确定</el-button>
            <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
          </el-form-item>
          <el-dialog width="30%"
            title="内层 Dialog"
            :visible.sync="innerVisible"
            append-to-body>
            <template>
              <el-radio-group v-model="applicant_radio"
                @change="doorsill_change">
                <el-radio label="无">无</el-radio>
                <el-radio label="有">有</el-radio>
              </el-radio-group>
            </template>
            <div slot="footer"
              class="dialog-footer">
              <el-button type="primary">确定</el-button>
            </div>
          </el-dialog>
        </el-form>
      </el-dialog>
      <el-table :data="tableData"
        border
        style="width: 100%">
        <el-table-column fixed
          prop="repairNum"
          label="工单编号">
        </el-table-column>
        <el-table-column prop="repairTarget"
          label="报修对象">
        </el-table-column>
        <el-table-column prop="state"
          label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state==1">待领取</span>
            <span v-if="scope.row.state==2">已接单</span>
            <span v-if="scope.row.state==3">已拒绝</span>
            <span v-if="scope.row.state==4">待验收</span>
            <span v-if="scope.row.state==5">重新维修</span>
            <span v-if="scope.row.state==6">已完成</span>
          </template>
        </el-table-column>
        <el-table-column prop="urgent"
          label="紧急程度">
          <template slot-scope="scope">
            <span v-if="scope.row.urgent==1">紧急</span>
            <span v-if="scope.row.urgent==2">普通</span>
          </template>
        </el-table-column>
        <el-table-column prop="repairPlace"
          label="报修地点">
        </el-table-column>
        <el-table-column prop="name"
          label="报修人">
        </el-table-column>
        <el-table-column prop="receiveName"
          label="维修人">
        </el-table-column>
        <el-table-column prop="createTime"
          width="160"
          label="下单时间">
        </el-table-column>
        <el-table-column prop="receiveTime"
          width="160"
          label="接单时间">
        </el-table-column>
        <el-table-column prop="inspectTime"
          width="160"
          label="完成时间">
        </el-table-column>
        <el-table-column fixed="right"
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)"
              type="text"
              size="small">查看</el-button>
            <el-button type="text"
              size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, prev , pager , next, sizes"
        :total="total"
        style="margin-top:20px">
      </el-pagination>
    </div>
  </div>

</template>
<script>
import { upimg } from "@/public/js/setting.js";
import { getRepair, addsave } from "@/public/js/Repair";
import { format } from "@/public/js/util";
export default {
  data() {
    return {
      tableData: [],
      pageSize: 10,
      pageNo: 1,
      startTime: format(new Date().getTime(), "yyyy-MM-dd"),
      repairPlace: "",
      name: "",
      state: "",
      urgent: "",
      time: "",
      total: 0,
      typeStr_state: "所有状态",
      typeStr: "紧急程度",
      innerVisible: false,
      applicant_radio: "无",
      ruleForm: {
        place: "",
        target: "",
        content: "",
        resource: "",
        applicant: ""
      },
      isView: true,
      dialogImageUrl: "",
      dialogVisible: false,
      rules: {
        place: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        target: [
          { required: true, message: "请填写活动形式", trigger: "blur" }
        ],
        content: [
          { required: true, message: "请填写活动形式", trigger: "blur" }
        ],
        resource: [
          { required: true, message: "请选择紧急程度", trigger: "change" }
        ]
      },
      oldUrl: "",
      imgUrl: [],
      disabled_file: false,
      imgList: []
    };
  },
  created() {
    this._getRepair();
  },
  methods: {
    _getRepair() {
      let data = {
        repairPlace: this.repairPlace,
        name: this.name,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        state: this.state,
        urgent: this.urgent,
        startTime: "",
        endTime: ""
      };
      getRepair(data).then(res => {
        this.tableData = res.data.repairList;
        this.total = res.data.total;
        console.log(res);
      });
    },
    // 上传图片
    sendChange(e) {
      var reader = new FileReader();
      reader.readAsDataURL(e.file);
      reader.onload = e => {
        let photoPath = e.target.result;
        upimg({
          nowPath: photoPath,
          oldPath: ""
        }).then(res => {
          //this.updateData.picture = res.data.path;
          this.imgUrl.push({
            name: "",
            url: res.data.path
          });
          if (this.imgUrl.length >= 5) {
            this.disabled_file = true;
          }
          console.log("this.imgUrl", this.imgUrl);
        });
      };
    },
    // 全部状态下拉选择
    setType_state(e) {
      this.search = "";
      this.state = e.id;
    },
    // 紧急程度
    setType(e) {
      this.search = "";
      //this.state = e.id;
    },
    // 日期查询
    searchByDate(val) {
      this.startTime = val;
      this.page = "";
    },
    //查询
    _reset() {
      this.pageSize = 10;
      this.pageNo = 1;
    },
    //新增
    _add() {
      this.title = "新建报修工单";
      this.imgList = [];
      this.ruleForm = {};
      this.id = "";
      this.dialogVisible = true;
      this.isView = false;
    },
    //单选报修人
    doorsill_change() {
      console.log(this.applicant_radio);
    },
    //新增保存
    submitForm(formName) {
      console.log(this.imgUrl);
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.imgUrl.forEach(item => {
            this.imgList.push({
              nowPath: item.url
            });
            console.log(this.imgList);
          });
        } else {
          console.log(this.ruleForm);
          return false;
        }
      });
    },
    handleSizeChange(value) {
      this.pageSize = value;
      this._getRepair();
    },
    handleCurrentChange(value) {
      this.pageNo = value;
      this._getRepair();
    },
    handleRemove(file, fileList) {
      this.imgUrl = fileList;
      console.log(file, fileList);
    },
    handlePictureCardPreview(response, file, fileList) {
      console.log(response, file, fileList);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handlePreview(file) {
      console.log(file);
    }
  }
};
</script>
<style lang="scss">
.repair-content {
  padding: 20px;
  .el-dialog__body {
    .el-input__inner,
    .el-textarea__inner {
      width: 300px;
    }
    .applicant_btn {
      position: absolute;
      top: 0;
      right: 75px;
    }
  }
}
</style>
